<template>
  <div class="mod-home">
    <div class="el-row" style="margin-left: -10px; margin-right: -10px;">
      <div class="el-col el-col-12 el-col-xs-24" style="padding-left: 10px; padding-right: 10px;">
        <table>
          <tr>
            <th>系统名称</th>
            <td>{{info.name}}</td>
          </tr>
          <tr>
            <th>版本信息</th>
            <td>{{info.codeVer}}</td>
          </tr>
          <tr>
            <th>操作系统</th>
            <td>{{info.os}}</td>
          </tr>
          <tr>
            <th>系统版本</th>
            <td>{{info.sysVer}}</td>
          </tr>
          <tr>
            <th>系统架构</th>
            <td>{{info.arch}}</td>
          </tr>
          <tr>
            <th>CPU核数</th>
            <td>{{info.cpus}}</td>
          </tr>
          <tr>
            <th>系统内存</th>
            <td>{{info.totalMem}}</td>
          </tr>
          <tr>
            <th>剩余内存</th>
            <td>{{info.freeMem}}</td>
          </tr>
          <tr>
            <th>内存使用</th>
            <td>{{info.percentMem}}</td>
          </tr>
          <tr>
            <th>系统语言</th>
            <td>{{info.sysLang}}</td>
          </tr>
        </table>
      </div>
      <div class="el-col el-col-12 el-col-xs-24" style="padding-left: 10px; padding-right: 10px;">
        <table>
          <tr>
            <th>JVM信息</th>
            <td>{{info.jvmInfo}}</td>
          </tr>
          <tr>
            <th>JVM版本</th>
            <td>{{info.jvmVer}}</td>
          </tr>
          <tr>
            <th>JAVA_HOME</th>
            <td>{{info.javaHome}}</td>
          </tr>
          <tr>
            <th>工作目录</th>
            <td>{{info.workSpace}}</td>
          </tr>
          <tr>
            <th>JVM空闲内存</th>
            <td>{{info.jvmFree}}</td>
          </tr>
          <tr>
            <th>JVM占用内存</th>
            <td>{{info.jvmTotal}}</td>
          </tr>
          <tr>
            <th>JVM最大内存</th>
            <td>{{info.jvmMax}}</td>
          </tr>
          <tr>
            <th>当前用户</th>
            <td>{{info.who}}</td>
          </tr>
          <tr>
            <th>CPU负载</th>
            <td>{{info.sysRate}}</td>
          </tr>
          <tr>
            <th>系统时区</th>
            <td>{{info.timeArea}}</td>
          </tr>
        </table>
      </div>

    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        info: {}
      }
    },
    activated () {
      this.getDataList()
    },
    methods: {
      // 获取数据列表
      getDataList () {
        this.$http({
          url: this.$http.adornUrl('/sys/info/list'),
          method: 'get'
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.info = data.info
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .mod-home {
    line-height: 1.5;
  }

  .mod-home table {
    width: 100%;
    border: 1px solid #ebeef5;
    border-collapse: collapse;
  }

  table {
    display: table;
    border-collapse: separate;
    box-sizing: border-box;
    text-indent: initial;
    border-spacing: 2px;
    border-color: grey;
  }

  table > tr {
    vertical-align: middle;
  }

  .mod-home table th {
    width: 30%;
  }

  .mod-home table td, .mod-home table th {
    padding: 12px 10px;
    border: 1px solid #ebeef5;
  }

  tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
  }

  th {
    display: table-cell;
    vertical-align: inherit;
    font-weight: bold;
  }

  td {
    display: table-cell;
    vertical-align: inherit;
  }

</style>

